<template>
  <el-dialog
    width="800px"
    v-model="inDialogData.show"
    :title="inDialogData.title"
    top="2vh"
    class="companyFormDialog"
  >
    <el-form
      :model="data"
      label-width="120px"
      class="company-form"
      ref="form"
      :rules="Rules"
      label-suffix="："
    >
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item prop="name" label="公司名称">
            <el-input v-model="data.name" size="small"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="nameEn" label="公司英文名">
            <el-input v-model="data.nameEn" size="small"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item prop="fullName" label="公司全称">
            <el-input v-model="data.fullName" size="small"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="fullNameEn" label="公司英文全称">
            <el-input v-model="data.fullNameEn" size="small"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item prop="sort" label="排序">
            <el-input-number
              v-model="data.sort"
              :min="1"
              :max="999"
              size="small"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="parentId" label="所属公司">
            <el-tree-select
              v-model="data.parentId"
              value-key="id"
              :data="companyData"
              check-strictly
              :render-after-expand="false"
              clearable
            >
              <template #default="{ data }">
                <el-option :label="data.name" :value="data.id" />
              </template>
            </el-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item prop="director" label="负责人">
            <el-input v-model="data.director" size="small"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="telphone" label="联系电话">
            <el-input v-model="data.telphone" size="small"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="data.email" size="small"> </el-input>
      </el-form-item>
      <el-form-item label="Logo">
        <el-upload
          class="avatar-uploader"
          action="/api/company/upload/logo"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          :before-upload="beforeAvatarUpload"
          :headers="{ Authorization: token }"
          :max="1"
          name="logo"
          v-loading="uploadLoading"
        >
          <el-image
            v-if="data.logoUrl"
            :src="data.logoUrl"
            class="avatar"
            fit="contain"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-row :gutter="8">
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item prop="address" label="公司地址">
            <el-input v-model="data.address" size="small"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="addressEn" label="公司英文地址">
            <el-input v-model="data.addressEn" size="small"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item prop="code" label="营业执照代码">
        <el-input v-model="data.unifiedSocialCreditCode" size="small">
        </el-input>
      </el-form-item>
      <el-form-item prop="profile" label="公司简介">
        <el-input v-model="data.profile" size="small"> </el-input>
      </el-form-item>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item prop="zipCode" label="邮编">
            <el-input v-model="data.zipCode" size="small"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="fax" label="传真">
            <el-input v-model="data.fax" size="small"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item prop="code" label="备注">
        <el-input v-model="data.description" size="small" type="textarea">
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel" link>取消</el-button>
        <el-button
          type="primary"
          @click="submit"
          :loading="inDialogData.btnLoading"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import { isvalidPhone, validEmail } from "@/utils/validate";
import { ElMessage } from "element-plus";
export default defineComponent({
  props: {
    modelData: {
      type: Object,
      default: () => {},
    },
    dialogData: {
      type: Object,
      default: () => {},
    },
    companyData: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelData", "update:dialogData", "submit", "cancel"],
  computed: {
    data: {
      get() {
        return this.modelData;
      },
      set(value) {
        this.$emit("update:modelData", value);
      },
    },
    inDialogData: {
      get() {
        return this.dialogData;
      },
      set(value) {
        this.$emit("update:dialogData", value);
      },
    },
  },
  data() {
    const validMail = (rule, value, callback) => {
      if (value == "" || value == null) {
        callback();
      } else if (validEmail(value)) {
        callback();
      } else {
        callback(new Error("邮箱格式错误"));
      }
    };
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback();
      } else if (!isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    return {
      Rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "change" }],
        fullName: [
          { required: true, message: "公司全称不能为空", trigger: "change" },
        ],
        email: [{ required: false, validator: validMail, trigger: "change" }],
        phone: [{ required: false, validator: validPhone, trigger: "change" }],
      },
      token: localStorage.getItem("jst:token"),
      uploadLoading: false,
    };
  },

  methods: {
    handleAvatarSuccess(res) {
      if (res.status) {
        this.$message.success("上传成功");
        this.data.logoUrl = res.data;
      } else {
        this.$message.error(res.message ?? "上传失败");
      }
      this.uploadLoading = false;
    },
    handleAvatarError() {
      this.$message.error("上传失败");
      this.uploadLoading = false;
    },
    beforeAvatarUpload(rawFile) {
      this.uploadLoading = true;
      let uploadFileType = ["image/png", "image/jpeg"];
      if (!uploadFileType.includes(rawFile.type)) {
        ElMessage.error("上传文件必须是jpg，png类型");
        this.uploadLoading = false;
        return false;
      }
      return true;
    },
    submit() {
      this.$emit("submit");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
  watch: {
    
  },
  mounted() {
  },
  created() {},
});
</script>

<style lang="scss" scoped>
.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}

.avatar-uploader :deep(.el-upload):hover {
  border-color: #409eff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
}

:deep(.el-input-number) {
  width: 100%;
}
</style>
<style>
.companyFormDialog .el-dialog__headerbtn {
  top: -5px;
}
</style>
